<template>
  <div>
    <h4 class="font-weight-bold py-3 mb-1">
      <span class="text-muted font-weight-light">接口定义 / 下探明细 /</span> 查看
    </h4>

    <div class="row">

      <div class="col-sm-6 col-xl-6">

        <b-card no-body header-tag="h6" class="mb-2">
          <b-card-header class="with-elements">
            下探接口列表
            <div class="card-header-elements ml-md-auto">
            </div>
          </b-card-header>
          <b-card-body>

            <sky-table :data="table.data" :columns="table.columns" :show-index="table.showIndex" :show-pagination="false" class="mt-0"></sky-table>

          </b-card-body>
        </b-card>
      </div>

      <div class="col-sm-6 col-xl-6">

        <b-card header="下探接口参数定义" header-tag="h6" class="mb-4">
          <b-card-body>
            <b-form>
              <b-form-group horizontal :label-cols="3">
                <div slot="label" class="text-sm-right pr-sm-2">下探接口别名</div>
                <b-input type="email" placeholder="企业黑名单查询" />
              </b-form-group>
              <b-form-group horizontal :label-cols="3">
                <div slot="label" class="text-sm-right pr-sm-2">下探接口</div>
                <b-input type="email" placeholder="工商黑名单" />
              </b-form-group>
              <b-form-group horizontal :label-cols="3">
                <div slot="label" class="text-sm-right pr-sm-2">企业编码</div>
                <b-input aria-disabled="" type="email" placeholder="$.result.keyNo" />
              </b-form-group>
              <b-form-group horizontal :label-cols="3">
                <div slot="label" class="text-sm-right pr-sm-2">备注</div>
                <b-textarea placeholder="Textarea" :rows="3" />
              </b-form-group>

            </b-form>

          </b-card-body>
        </b-card>
      </div>
    </div>
  </div>
</template>

<style src="@/vendor/libs/vue-data-tables/vue-data-tables.scss" lang="scss"></style>

<script>
import Vue from "vue";
import { ClientTable } from "vue-tables-2";

Vue.use(ClientTable);
let vm;

export default {
    name: "tables-vue-tables-2",
    metaInfo: {
        title: "Vue Tables 2 - Tables"
    },
    components: {},
    data: () => ({
        table: {
            showIndex: false,
            data: [],
            columns: [
                {
                    title: "API名称",
                    key: "name"
                },
                {
                    title: "下探别名",
                    key: "alianame"
                },
                {
                    title: "下探类型",
                    key: "todo"
                },
                {
                    title: "状态",
                    key: "status"
                }
            ]
        }
    }),
    created() {
        vm = this;
        // Fetch json data
        const req = new XMLHttpRequest();
        req.open("GET", "/static/json/api_downlist-data.json");

        req.onload = () => {
            const data = JSON.parse(req.response);

            // Add IDs for child rows functionality
            this.table.data = data;
        };

        req.send();
    },
    methods: {
        edit(row) {
            this.$router.push("/settings/scorecard/setting");
        },
        remove(row) {
            alert(`Remove: ${row.first_name} ${row.last_name}`);
        }
        // showSlideModal() {
        //   this.$refs.slideModal.show();
        // },
        // hideSlideModal() {
        //   this.$refs.slideModal.hide();
        // }
    }
};
</script>
